<template>
  <q-inner-loading :visible="!!visible" :style="style" v-if="center">
    <q-spinner-Dots :size="size" color="primary"></q-spinner-Dots>
  </q-inner-loading>
  <div v-else-if="!!visible" class="row justify-center">
    <q-spinner-Dots  :size="size" color="primary" :style="style"></q-spinner-Dots>
  </div>
</template>

<script>
    export default {
      name: 'aLoading',
      props: {
        visible: {
          required: true
        },
        size: {
          type: String,
          required: false,
          default: '50px'
        },
        height: {
          type: String,
          required: false
        },
        center: {
          type: Boolean,
          required: false,
          default: true
        }
      },
      data () {
        return {
        }
      },
      computed: {
        style () {
          if (this.height) {
            return { height: this.height }
          } else {
            return {}
          }
        }
      }
    }
</script>

<style lang="stylus">
</style>
